<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>

</head>
<body>
<div id="vue13">
    <p>{{user.username}}</p>
    <p>{{user.sex}}</p>
    <p >{{user.height}}</p>
    <p >{{user.age}}</p>
    <p >{{user.num}}</p>
    <input type="text" v-model="user.username">

    <button @click="addAge">查看身高</button>
    <button @click="del">删除身高</button>
    <button onclick="cancal()">取消监听</button>
</div>
</body>
<script>
    let vue13=new Vue({
        el:"#vue13",
        data:{
            user:{
                username:"111",
                sex:"男"
            }

        },
        methods:{
            addAge:function () {
              this.$set(this.user,"height","170cm")
            },
            del:function () {
              this.$delete(this.user,"height")
            }
        }
    })
   vue13.$set(vue13.user,"age",20) //属性名写成字符串 ” “
   Vue.set(vue13.user,"num","97")
    let unwatch= vue13.$watch("user.username",function (newVal,oldVual) {
        console.log("username发生改变了"+"  原来值是"+oldVual+"  现在的值是："+newVal)
    },{
        deep:true
    })
   //Vue.delete(vue13.user,"username")
    console.log(vue13)
   function cancal() {
       console.log("监听被取消了")
        unwatch()

   }
</script>
</html>